<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { emojiList, findItemByLabel } from '@/components/emoji/emoji'
import { CommentAddReq, CommentSource } from '@/api/comment/type'
import { PropType } from 'vue'

const content = ref('')
const activeName = ref('first')
const props = defineProps({
  placeholderValue: {
    type: String,
    default: '留下点什么吧...'
  },
  btnValue: {
    type: String,
    default: '发表评论'
  },
  parentId: {
    type: Number,
    default: null
  },
  articleId: {
    type: Number,
    required: false,
    default: null
  },
  source: {
    type: String as PropType<CommentSource>,
    default: null
  }
})
const emit = defineEmits(['submitComments'])
const { placeholderValue, btnValue, parentId, articleId, source } = toRefs(props)

function selectEmoji(val: any) {
  content.value += val
}

// eslint-disable-next-line consistent-return
function submit() {
  const a = content.value.trim()
  if (a.length < 1) {
    return ElMessage({
      message: h('p', { style: 'line-height: 1; font-size: 14px' }, [
        h('span', null, '请至少写 '),
        h('i', { style: 'color: teal' }, '1个字符哦')
      ]),
      type: 'warning'
    })
  }
  const data: CommentAddReq = {
    parentId: parentId.value,
    articleId: articleId.value,
    content: content.value,
    type: 0,
    source: source.value
  }
  emit('submitComments', data)
  content.value = ''
}

// 查看效果
</script>

<template>
  <div class="commentInput">
    <el-input v-model="content" :rows="4" type="textarea" :placeholder="placeholderValue" />
    <div class="opertionBtn">
      <el-popover placement="bottom" :width="340" trigger="hover">
        <template #reference>
          <h3 class="btnleft">
            <svg-icon icon-class="face"></svg-icon>
          </h3>
        </template>
        <!--emoji选择-->
        <div class="emojiDiv">
          <el-tabs v-model="activeName" class="demo-tabs">
            <el-tab-pane v-for="(item, index) in emojiList" :key="index" :name="item.label">
              <template #label>
                <span class="custom-tabs-label">
                  <img :src="item.img" class="emojiImg" :alt="item.label" />
                </span>
              </template>
              <div v-for="(v, k) in item.childrens" :key="k" class="emojiBox">
                <img
                  :src="v.img"
                  class="emojiImg"
                  :alt="item.label"
                  @click="selectEmoji(v.label)"
                />
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-popover>
      <!--提交按钮-->
      <el-button type="primary" @click="submit()">{{ btnValue }}</el-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
.commentInput {
  width: 100%;
}

.opertionBtn {
  display: flex;
  justify-content: flex-end;
  margin: 10px;
  font-size: 18px;
  color: #909399;

  span {
    margin-left: 5px;
  }
}

.btnleft {
  margin: 3px 40px;
  //display: flex;
  //align-items: center;
}

.emojiImg {
  width: 25px;
  height: 25px;
  margin: 5px;
}

.emojiDiv {
  :deep(.el-tabs__nav) {
    width: 100%;
  }

  :deep(.el-tabs__item) {
    width: 50%;
  }

  :deep(.el-tabs__content) {
    height: 150px;
    overflow: auto;
  }
}

.emojiBox {
  width: 34px;
  margin: 2px;
  height: 34px;
  text-align: center;
  line-height: 24px;
  display: inline-block;
}

.emojiBox:hover {
  background: #ddd;
}
</style>
